<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Perfekta. Multipurpose Site Theme.</title>
		<link rel="shortcut icon" href="images/favicon.png">

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

		<!-- Custom CSS -->
		<link href="css/style.css" rel="stylesheet" media="screen">

		<!-- Owl Carousel stylesheet -->
		<link href="css/owl.carousel.css" rel="stylesheet">

		<!-- Owl Carousel Default Theme -->
		<link href="css/owl.theme.css" rel="stylesheet">

		<!-- Fancybox -->
		<link href="css/jquery.fancybox.css" rel="stylesheet">

		<!-- Fotorama -->
		<link href="css/fotorama.css" rel="stylesheet">

		<!-- Google Fonts -->
		<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Bree+Serif" rel="stylesheet">

		<!-- Font Awesome Icons -->
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css" rel="stylesheet">

		<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

		<!-- Fixed navbar -->
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html"><img src="http://coffeecreamthemes.com/themes/perfekta/site/images/logo.png" alt="Perfekta. Multipurpose Site Theme." class="img-responsive" /></a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="index.html">Full Width Slider</a></li>
								<li><a href="index-fullscreen.html">Full Screen Slide</a></li>
								<li><a href="index-fixed.html">Fixed Width Slider</a></li>
								<li><a href="index-bootstrap-fullwidth.html">Full Width Bootstrap Carousel</a></li>
								<li><a href="index-bootstrap-fixedwidth.html">Fixed Width Bootstrap Carousel</a></li>
								<li><a href="index-image-text.html">Static Image and Text Banner</a></li>
								<li><a href="index-image.html">Static Image Banner</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="features.html">Features</a></li>
								<li><a href="about.html">About Us</a></li>
								<li><a href="member.html">Team Member</a></li>
								<li><a href="leftcolumn.html">Left Column</a></li>
								<li><a href="rightcolumn.html">Right Column</a></li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="portfolio1.html">1 Columns</a></li>
								<li><a href="portfolio2.html">2 Columns</a></li>
								<li><a href="portfolio3.html">3 Columns</a></li>
								<li><a href="portfolio4.html">4 Columns</a></li>
								<li><a href="project.html">Single Project Page</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="blog.html">Post List</a></li>
								<li><a href="post.html">Single Post</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shop <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="shop.html">Product List</a></li>
								<li><a href="products.html">Product Details</a></li>
								<li><a href="basket.html">Basket</a></li>
								<li><a href="checkout.html">Checkout</a></li>
							</ul>
						</li>
					</ul>
				</div><!--/.nav-collapse -->
			</div><!--/.container -->
		</div><!--/.navbar -->

		<!-- Content Start -->
		<div class="container">

			<div class="row row-margin no-fade">

				<!-- Article Start -->
				<div class="col-sm-8">

					<div class="row no-fade">
						<div class="col-sm-6 fotorama" data-nav="thumbs">
							<img src="http://placehold.it/400x600" alt="" class="img-responsive" />
							<img src="http://placehold.it/400x600" alt="" class="img-responsive" />
							<img src="http://placehold.it/400x600" alt="" class="img-responsive" />
							<img src="http://placehold.it/400x600" alt="" class="img-responsive" />
							<img src="http://placehold.it/400x600" alt="" class="img-responsive" />
						</div>

						<div class="col-sm-6">
							<h1>Product title goes here</h1>
							<h2 class="brand-primary">$289.90</h2>
							<h5>Category: Dresses</h5>
							<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
							<div class="quantity">
								<label for="qty">Quantity: </label>
								<input type="text" name="quantity" value="1" class="qty" id="qty" />
								<input type="submit" value="Add to Cart" class="btn btn-primary">
							</div>
						</div>
					</div>
				
					<div class="row row-margin no-fade">
						<div class="col-sm-12">
							<!-- Tabs Start -->
							<ul class="nav nav-tabs">
								<li class="active"><a href="#tab1" data-toggle="tab">Description</a></li>
								<li><a href="#tab2" data-toggle="tab">Reviews</a></li>
							</ul>

							<div class="tab-content">
								<div class="tab-pane fade in active" id="tab1">
									<h4>Product Description</h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor cursus purus pulvinar blandit. Phasellus accumsan tempus condimentum. Vivamus non euismod tellus. In quis augue ac eros feugiat dictum et non elit. Nunc ac consectetur lacus. Pellentesque euismod egestas urna, a eleifend massa gravida eu. Cras mattis, augue ac ultrices pretium, felis libero ultrices neque, faucibus condimentum nunc mauris ac sapien. Nulla neque nisl, rutrum id semper a, ullamcorper eget justo. Nam et enim eu lectus molestie commodo. Aliquam consectetur nisi ut consequat iaculis.</p>
								</div>
								<div class="tab-pane fade" id="tab2">
									<h4>Reviews</h4>
									<p>Sed vel consectetur nisl. Proin tincidunt massa non faucibus mollis. Cras sapien lectus, pharetra quis tortor sed, varius scelerisque lectus. Ut ornare sem non mauris mollis cursus. Ut mattis nisl pretium, aliquam eros vitae, rhoncus odio. Mauris at molestie augue. Nam quam dolor, volutpat in metus placerat, vehicula feugiat felis. Ut posuere libero vitae aliquam vehicula. Duis lacinia risus a tortor tempus, eget dapibus leo egestas.</p>
								</div>
							</div>
							<!-- Tabs End -->
						</div>
					</div>

					<div class="row row-margin no-fade">
						<div class="col-sm-12">
							<h4>Related Products</h4>
						</div>
						<div class="col-sm-4 text-center product">
							<a href="#"><img src="http://placehold.it/400x600" alt="" class="img-responsive" /></a>
							<h5>Product name</h5>
							<p>$298.90</p>
							<p><a href="#" class="btn btn-default">Add to Cart</a></p>
						</div>
						<div class="col-sm-4 text-center product">
							<a href="#"><img src="http://placehold.it/400x600" alt="" class="img-responsive" /></a>
							<h5>Product name</h5>
							<p>$298.90</p>
							<p><a href="#" class="btn btn-default">Add to Cart</a></p>
						</div>
						<div class="col-sm-4 text-center product">
							<a href="#"><img src="http://placehold.it/400x600" alt="" class="img-responsive" /></a>
							<h5>Product name</h5>
							<p>$298.90</p>
							<p><a href="#" class="btn btn-default">Add to Cart</a></p>
						</div>
					</div>

				</div>
				<!-- Article End -->

				<!-- Column Start -->
				<div class="col-sm-4">
					<aside>
						<h5><i class="fa fa-folder-open fa-lg"></i>Categories</h5>
						<ul class="categories">
							<li><a>Blouses &amp; Tops</a>
								<ul>
									<li><a href="#">Tops &amp; T-Shirts</a></li>
									<li><a href="#">Short Sleeve Blouses</a></li>
									<li><a href="#">Long Sleeve Blouses</a></li>
								</ul>
							</li>
							<li><a>Knitwear</a>
								<ul>
									<li><a href="#">Jumpers</a></li>
									<li><a href="#">Turtlenecks</a></li>
									<li><a href="#">Dresses</a></li>
									<li><a href="#">Scarfs</a></li>
									<li><a href="#">Hats &amp; Gloves</a></li>
								</ul>
							</li>
							<li><a>Outdoor</a>
								<ul>
									<li><a href="#">Jackets</a></li>
									<li><a href="#">Leather Jackets</a></li>
									<li><a href="#">Rain Jackets</a></li>
									<li><a href="#">Coats</a></li>
								</ul>
							</li>
							<li><a>Dresses &amp; Skirts</a>
								<ul>
									<li><a href="#">Mini</a></li>
									<li><a href="#">Medium</a></li>
									<li><a href="#">Maxi</a></li>
								</ul>
							</li>
							<li><a>Trousers</a>
								<ul>
									<li><a href="#">Neans</a></li>
									<li><a href="#">Chinos</a></li>
									<li><a href="#">Shorts</a></li>
								</ul>
							</li>
							<li><a>Lingerie</a>
								<ul>
									<li><a href="#">Pants</a></li>
									<li><a href="#">Bras</a></li>
									<li><a href="#">Tights</a></li>
								</ul>
							</li>
							<li><a>Shoes</a>
								<ul>
									<li><a href="#">Sandals</a></li>
									<li><a href="#">Heels</a></li>
									<li><a href="#">Sneackers</a></li>
									<li><a href="#">Boots</a></li>
								</ul>
							</li>
							<li><a>Acessories</a>
								<ul>
									<li><a href="#">Belts</a></li>
									<li><a href="#">Scarfs</a></li>
									<li><a href="#">Gloves</a></li>
									<li><a href="#">Hats</a></li>
									<li><a href="#">Handbags</a></li>
								</ul>
							</li>
						</ul>
						<hr>
						<h5><i class="fa fa-tint fa-lg"></i> Color</h5>
						<ul class="submenu">
							<li><a href="#">Black (42)</a></li>
							<li><a href="#">White (37)</a></li>
							<li><a href="#">Red (29)</a></li>
							<li><a href="#">Green (31)</a></li>
							<li><a href="#">Blue (16)</a></li>
						</ul>
						<hr>
						<h5><i class="fa fa-signal fa-lg"></i> Size</h5>
						<ul class="submenu">
							<li><a href="#">XS (7)</a></li>
							<li><a href="#">S (19)</a></li>
							<li><a href="#">M (23)</a></li>
							<li><a href="#">L (31)</a></li>
							<li><a href="#">XL (28)</a></li>
							<li><a href="#">XXL (15)</a></li>
						</ul>
					</aside>
				</div>
				<!-- Column End -->

			</div>
			
		</div>
		<!-- Content End -->

		<!-- Prefooter Start -->
		<div class="prefooter">
			<div class="container">
				<div class="row">
					<div class="col-sm-3 latest-posts">
						<h5>Latest News</h5>
						<div class="row">
							<div class="col-xs-4">
								<img src="http://placehold.it/80x80" alt="" />
							</div>
							<div class="col-xs-8">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tellus.
								<br><a href="#">Read More</a>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-4">
								<img src="http://placehold.it/80x80" alt="" />
							</div>
							<div class="col-xs-8">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tellus.
								<br><a href="#">Read More</a>
							</div>
						</div>
					</div>
					<div class="col-sm-3 latest-comments">
						<h5>Latest Comments</h5>
						<div class="row">
							<div class="col-xs-4">
								<img src="http://placehold.it/80x80" alt="" />
							</div>
							<div class="col-xs-8">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tellus.
								<br><a href="#">Read More</a>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-4">
								<img src="http://placehold.it/80x80" alt="" />
							</div>
							<div class="col-xs-8">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tellus.
								<br><a href="#">Read More</a>
							</div>
						</div>
					</div>
					<div class="col-sm-3 footer-photos">
						<h5>Latest Photos</h5>
						<ul>
							<li><a href="images/footergallery-big1.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big2.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big3.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big4.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big5.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
							<li><a href="images/footergallery-big6.jpg" class="fancybox" data-fancybox-group="group" title=""><img src="http://placehold.it/90x90" alt="" /></a></li>
						</ul>
						<div class="clear"></div>
					</div>
					<div class="col-sm-3 footer-contact">
						<h5>Contact Us</h5>
						<ul>
							<li>
								<address>
									<i class="fa fa-map-marker"></i>
									<p>
										<span>Address:</span>
										<br>416 Water St.
										<br>New York, NY 10002, USA
									</p>
								</address>
							</li>
							<li>
								<i class="fa fa-phone"></i>
								<p><span>Phone:</span> +1 800 555 789</p>
							</li>
							<li>
								<i class="fa fa-print"></i>
								<p><span>Fax:</span> +1 123 555 789</p>
							</li>
							<li>
								<i class="fa fa-envelope"></i>
								<p><span>Email:</span> <a href="mailto:name@domain.com">name@domain.com</a></p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- Prefooter End -->

		<!-- Footer Start -->
		<footer>
			<div class="container">
				<div class="row">
					<div class="col-sm-6">
						&copy; 2013 Perfekta. Web Design &amp; Development by <a href="http://www.coffeecreamthemes.com/" target="_blank">Coffeecream Themes</a>.
					</div>
					<div class="col-sm-6">
						<ul>
							<li><a href="http://facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a></li>
							<li><a href="http://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></li>
							<li><a href="http://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a></li>
							<li><a href="http://tumblr.com/" target="_blank"><i class="fa fa-tumblr"></i></a></li>
							<li><a href="http://dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a></li>
							<li><a href="http://xing.com/" target="_blank"><i class="fa fa-xing"></i></a></li>
							<li><a href="http://youtube.com/" target="_blank"><i class="fa fa-youtube"></i></a></li>
						</ul>
					</div>
				</div>
			</div>
		</footer>
		<!-- Footer Start -->

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="http://code.jquery.com/jquery.js"></script>

		<!-- Bootstrap Plugins -->
		<script src="js/bootstrap.min.js"></script>

		<!-- Retina Plugin -->
		<script src="js/retina-1.1.0.min.js"></script>

		<!-- Owl Carousel Plugin -->
		<script src="js/owl.carousel.js"></script>

		<!-- Fancybox Plugin -->
		<script src="js/jquery.fancybox.js"></script>

		<!-- Bootstrap Progress Bar -->
		<script src="js/bootstrap-progressbar.js"></script>

		<!-- MixItUp Plugin -->
		<script src="js/jquery.mixitup.min.js"></script>

		<!-- Fotorama Plugin -->
		<script src="js/fotorama.js"></script>

		<!-- Settings -->
		<script src="js/settings-inner.js"></script>
		
	</body>
</html>